<template>
	<view v-if="isend">
		<view class="account_top">
			<view class="con">
				<view class="top">
					<view class="left">
						<view class="icon">
							<image src="../../static/images/i7.png" mode="widthFix"></image>
						</view>
						<view class="span">总积分</view>
						<view class="b">{{info.integral}}</view>
					</view>
					<!-- <navigator url="/pages/center/" hover-class="none"> -->
						<!-- <view class="right" @click="GoInfo()">
							<image src="../../static/images/i8.png" mode="widthFix"></image>
							<text>积分核销码</text>
						</view> -->
					<!-- </navigator> -->
				</view>
			</view>
		</view>
		<view class="wp">
			<view class="shu_title">
				<view class="span" style="background-color: #e8a566;"></view>
				<text>积分明细</text>
			</view>
			<view class="integral_list">
				<view class="item" v-for="(item,i) in list.items" :key="i">
					<view class="txt">
						<view class="span">{{item.remark}}</view>
						<view class="em">{{common.DateToString(item.created_at)}}</view>
					</view>
					<view class="b" v-if="item.change>0">+{{item.change}}</view>
					<view class="b" v-else>{{item.change}}</view>
				</view>
				<view class="web_404" v-if="list.items.length==0">
					<image src="../../static/images/none404.png" mode="widthFix"></image>
				</view>	
							
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				info:[],
				list:[],
				isend:false,
			}
		},
		onLoad() {
			let that = this;			
			if (that.common.GetStorage('byh5token')) {
				that.logintype = that.common.GetStorage('byh5type');				
				
				that.GetUserMass();
			} else {
				uni.reLaunch({
					url: '/pages/login/login',
				})
			}
		},
		methods: {			
			GetUserMass:function(){
				let that = this;
				uni.showLoading({
					title: '加载中...',
					mask: true
				});
				that.common.http('GET', 'user', '', function(res) {
					uni.hideLoading();
					console.log(res.data)
					that.info = res.data;
					
					that.GetUserBank();
				});
			},
			
			GetUserBank(){
				let that = this;
				uni.showLoading({
					title: '加载中...',
					mask: true
				});
				that.common.http('GET', 'user/integral', '', function(res) {
					uni.hideLoading();
					console.log(res.data);
					that.list = res.data;
					that.isend = true;
				});
			},
			GoInfo: function() {
				let that = this;
				if(that.info.integral>0){
					uni.navigateTo({
						url: '/pages/center/integralcode'
					});
				}
				else{
					uni.showToast({
						icon: 'none',
						title: '积分不足',
						duration: 2000
					});
				}				
			},
		}
	}
</script>

<style scoped>
	.wp {
		margin-top: 30rpx;
	}

	.account_top {
		background-color: #f7f7f7;
		padding: 0 18rpx;
	}

	.account_top .con {
		background-color: #2884ff;
		background: linear-gradient(to right, #ff8824, #ffaa2e);
		background-repeat: no-repeat;
		background-position: center;
		border-top-left-radius: 12px;
		border-top-right-radius: 12px;
		background-size: cover;
	}

	.account_top .con .top {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 80rpx 32rpx;
	}

	.account_top .con .top .left {
		padding-left: 130rpx;
		position: relative;
	}

	.account_top .con .top .left .icon {
		position: absolute;
		left: 0;
		top: 50%;
		transform: translateY(-50%);
	}

	.account_top .con .top .left .span {
		font-size: 24rpx;
		color: #fff;
	}

	.account_top .con .top .left .b {
		font-size: 48rpx;
		color: #fff;
		font-weight: bold;
		margin-top: 10rpx;
	}

	.account_top .con .top .left image {
		width: 100rpx;
	}

	.account_top .con .top .right {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 234rpx;
		height: 66rpx;
		border-radius: 50px;
		background-color: #fff;
		font-size: 28rpx;
		color: #ff8924;
	}

	.account_top .con .top .right text {
		vertical-align: middle;
		margin-left: 12rpx;
		line-height: 1;
	}

	.account_top .con .top .right image {
		width: 24rpx;
		vertical-align: middle;
	}
</style>